<template>
	<div id="detail">
		<!-- 1、头 -->
		<div class="detail_top">
			
			<!-- 导航 -->
			<div class="toptop">
				<van-row type="flex" justify="space-between" algin='center'>
					
				  <van-col span="14">
					  <van-row type="flex" justify="space-around" algin='center'>
		
						  <!-- 返回箭头 -->
						<van-col span="2">
						  <van-icon @click='back' class-prefix="iconfont" name="fanhui1" size="20" color="#ffffff"/>
						</van-col>
						<!-- 出版or加载or原创 -->
						<van-col span='16' class="fanhuitext">
						   <div class="van-ellipsis"><h3>出版</h3></div>
						</van-col>
						
					  </van-row>
				  </van-col>
				  
				  <van-col span="8">
					  <van-row type="flex" justify="end" algin='center'>
						<!-- 购物车 -->
						<van-col span="6">
						  <van-icon class-prefix="iconfont" name="jiarugouwuche" size="20" color="#ffffff"/>
						</van-col>
						<!-- 更多 -->
						<van-col span="6">
						  <van-popover v-model="moreSelect" trigger="click" placement="bottom-end" :actions="actions" :offset='[18,0]'>
							<template #reference>
							  <van-icon class-prefix="iconfont" name="yuandiancaidan" size="20" color="#ffffff"/>
							</template>
						  </van-popover>
						</van-col>
						
					  </van-row>
				  </van-col>
				  
				</van-row>
			</div>
			
			
			<!-- 关于书 -->
			<div class="aboutbook">
				<van-row type="flex" justify="space-around">
				  <van-col span="12">
					  <van-card>
						<template #title>
						  <h1>{{list.title}}</h1>
						</template>
						
						<template #desc>
						  <h2>{{list.subtitle}}</h2>
						</template>
						<template #tags>
						  <p class="author">作者：<span>{{list.agent.name}}</span></p>
						  <p class="author" v-if='list.translator'>译者：<span>{{list.translator}}</span></p>
						</template>
						
						<template #price-top>
						  <p class="price-topJG0">暂无评分</p>
						  <p>豆 <span>{{list.book_average_rating}} </span><span> {{list.book_rating_count}}</span>评价（豆瓣读书）</p>
						  
						  <p class="price-topJG1">{{list.publisher}} / {{list.publish_time}}</p>
						  <p>{{list.round_word_count}}</p>
						</template>
						
						<template #price>
						  <h2><small>￥<strike>{{parseFloat(list.fixed_price/100).toFixed(2)}}</strike></small> {{parseFloat(list.price/100).toFixed(2)}}</h2>
						</template>
					  </van-card>
				  </van-col>
				  
				  <van-col span="12">
					  <van-image :src="list.cover"></van-image>
				  </van-col>
				</van-row>
				
				<van-cell-group inset v-if="list.promotion">
				  <van-cell :title="list.promotion_remark" is-link :center='true'>
					  <template #value>
						 截止至：{{list.promotion_end_time}}
					  </template>
				  </van-cell>  
				</van-cell-group>
			</div>
		</div>
		
		<!--2、书本详解  -->
		<div class="outBookDetail">
			<!-- 详解文本 -->
			<div class="wrapper">
				<input id="exp1" class="exp"  type="checkbox">
				<div class="text">
					<label class="btn" for="exp1"></label>
					<div v-html='list.abstract_html'></div>
				</div>
			</div>
			
			<!-- 书本类型 -->
			<div class="bookType">
				<van-row type="flex" align='center' gutter="10">
				  <van-col v-for="item in list.tags" :key="item"><p>{{item.tag}}</p></van-col>
				</van-row>
			</div>
			<van-cell is-link>
				<template #title>
					<h3>目录</h3>
				</template>
			</van-cell>
		</div>
		
		<h1>2222</h1>
	</div>
</template>

<script>
	import Vue from 'vue'
	export default{
			data(){
				return{
					moreSelect:false,
					actions:[{text:'礼物'},{text:'回首页'},{text:'分享'}],
					list:this.$store.state.bookDetail,
				}
			},
			methods:{
				back(){
					this.$router.back()
				},
			},
			mounted() {
				this.$store.dispatch('getBookDetail',this.$route.query)
				console.log(this.$route.query)
				console.log(this.list)
			}
		}
</script>

<style lang="scss">
	#detail{
		background-color: #EFF2F3;
	}
	
	.detail_top{
		width: 100%;
		height: 20%;
		background-size: 150% 150%;
		// background-image: url();
		background-color: palegoldenrod;
		// background-position: -30% 50%;
		
		.toptop{
			background-color: transparent;
			line-height: 2.875rem;
			
			.van-row--flex{
				flex-wrap: nowrap;
			}
			.fanhuitext{
				color: white;
				white-space: nowrap;
				// overflow: hidden;
				// text-overflow: ellipsis;
				// display: -webkit-box;
				// -webkit-box-orient: vertical;
			}
		}
		.aboutbook{
			.van-card {
				background-color: transparent;
				color: #FFFFFF;
				
				.author{
					p{
						color: pink;
					}
					
					span{
						color: #FFFFFF;
					}
				}
				.price-topJG0,.price-topJG1{
					margin-top: 1.25rem;
				}

			}
			.van-cell,.van-cell-group{
				background-color: transparent;
				border: 1px solid #A6A6A6;
			}
		}
	}
	
	// 2、详解
	.outBookDetail{
		background-color: white;
		margin-bottom: 0.625rem;
		
		// 详解文本
		.wrapper {
			display: flex;
			overflow: hidden;
			padding: 1rem;
			box-sizing: border-box;
			 
			 .text {
				font-size: 1rem;
				overflow: hidden;
				text-overflow: ellipsis;
				text-align: justify;
		
				display: -webkit-box;
				-webkit-line-clamp: 4;
				-webkit-box-orient: vertical;
				position: relative;
			 }
			 .text::before {
				content: '';
				height: calc(100% - 16px);
				float: right;
			 }
			 .btn{
				float: right;
				clear: both;
				font-size: 1rem;
				padding: 0 0 0 0.5rem;
				
				background: rgba(250, 249, 252, 0.5);
				line-height: 1.5rem;
				color:  black;
				cursor: pointer;
			 }
			 .btn::before{
				font-family:"vant-icon";
			   content:'\e65e'
			 }
			 .exp{
			   display: none;
			 }
			 .exp:checked+.text{
			   -webkit-line-clamp: 999;
			 }
			 .exp:checked+.text .btn::before{
				 font-family:"vant-icon";
			     content:' \e65f'
			 }
		}
		
		// 书本类型
		.bookType{
			padding: 0 1rem 1rem;
			box-sizing: border-box;
			
			.van-col{
				p{
					padding: 0.3125rem 0.625rem;
					box-sizing: border-box;
					font-size: 0.875rem;
					border-radius: 0.3125rem;
					box-shadow: 0.0625rem 0.0625rem 0.3125rem rgb(0 0 0 / 20%);

				}
			}
		}
		
	}
	
	
</style>